// 如果需要在组件中使用计算属性和监视器功能，需要在组件中导入ComponentWithComputed方法
import { ComponentWithComputed } from "miniprogram-computed";
// 使用导入的ComponentWithComputed方法替换Component方法
ComponentWithComputed({
  data: {
    a: 1,
    b: 2,
  },
  // 计算属性具有缓存特性，计算属性只在初始化和依赖计算的属性发生变化时才会执行
  computed: {
    total(data) {
      // 计算属性方法内部必须有返回值，方法名为计算属性名
      // 在计算属性内不能使用this获取data中的数据，需要使用形参
      console.log(this, data); // undefined Proxy {a: 1, b: 2}
      return data.a + data.b;
    },
  },
  // 数据监听器，用于监听数据是否发生了变化，在数据变化后执行相应的逻辑
  watch: {
    // key:需要监听的数据 value:回调函数接收改变后的最新数据
    a(newValue) {
      console.log("a发生变化了最新值为：" + newValue);
    },
    // 同时监听多个数据，数据与数据间使用,进行分隔，只要有一个数据发生变化回调函数就会执行
    "b,total"(b, total) {
      console.log("b或total发生了变化");
      console.log("b最新值为：" + b);
      console.log("total最新值为：" + total);
    },
  },
  // 当依赖计算的属性发生变化时会重新进行计算
  methods: {
    updateA() {
      this.setData({
        a: this.data.a + 1,
      });
    },
  },
});
